<template>
  <div class="dashboard-container">
    <div class="card-row">
      <div class="stat-card" v-for="(item, index) in dataList" :key="index">
        <!-- 卡片头部信息 -->
        <div class="card-header">
          <div class="header-info">
            <div class="card-title">{{ item.title }}</div>
            <div class="time-range">{{ item.time }}</div>
          </div>
          <div class="header-img">
            <img v-if="index == 0" src="@/assets/operationAnalysis/u238.png" alt="教师教学档案袋平台">
            <img v-if="index == 1" src="@/assets/operationAnalysis/u240.png" alt="教师教学档案袋平台">
            <img v-if="index == 2" src="@/assets/operationAnalysis/u301.png" alt="教师教学档案袋平台">
          </div>
        </div>
        
        <!-- 卡片内容统计信息 -->
        <div class="card-content">
          <div class="stat-item">
            <div class="stat-info">
              <div class="stat-label">{{ item.projectName }}</div>
              <div class="stat-value">{{ item.jgxms }}个</div>
            </div>
            <div class="growth-indicators">
              <div class="growth-item">
                <div class="growth-type">年同比</div>
                <div class="growth-icon">
                  <img v-if="item.jgYearStatus == 'increase'" src="@/assets/operationAnalysis/u251.png" alt="增长图标">
                  <img v-else src="@/assets/operationAnalysis/u254.png" alt="下降图标">
                </div>
                <div class="growth-value">{{ item.jgYearMessage }}</div>
              </div>
              <div class="growth-item">
                <div class="growth-type">日环比</div>
                <div class="growth-icon">
                  <img v-if="item.jgDayStatus == 'increase'" src="@/assets/operationAnalysis/u251.png" alt="增长图标">
                  <img v-else src="@/assets/operationAnalysis/u254.png" alt="下降图标">
                </div>
                <div class="growth-value">{{ item.jgDayMessage }}</div>
              </div>
            </div>
          </div>
          
          <div class="stat-item">
            <div class="stat-info">
              <div class="stat-label">{{ item.clazzName }}</div>
              <div class="stat-value">{{ item.kccxs }}个</div>
            </div>
            <div class="growth-indicators">
              <div class="growth-item">
                <div class="growth-type">年同比</div>
                <div class="growth-icon">
                  <img v-if="item.kcYearStatus == 'increase'" src="@/assets/operationAnalysis/u251.png" alt="增长图标">
                  <img v-else src="@/assets/operationAnalysis/u254.png" alt="下降图标">
                </div>
                <div class="growth-value">{{ item.kcYearMessage }}</div>
              </div>
              <div class="growth-item">
                <div class="growth-type">日环比</div>
                <div class="growth-icon">
                  <img v-if="item.kcDayStatus == 'increase'" src="@/assets/operationAnalysis/u251.png" alt="增长图标">
                  <img v-else src="@/assets/operationAnalysis/u254.png" alt="下降图标">
                </div>
                <div class="growth-value">{{ item.kcDayMessage }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTeachingResearchApi, queryScientificResearchApi, querySocialServiceApi } from '@/api/operationAnalysis'

export default {
  props: {
    source: Array,
  },
  data() {
    return {
      dataList: [
        {
          title: '教学教研',
          time: '2025.03.01-2025.07.05',
          projectName: '教改项目数',
          clazzName: '课程创新数',
        },
        {
          title: '科研管理',
          time: '2025.03.01-2025.07.05',
          projectName: '科研经费数',
          projectCount: 345,
          clazzCount: 345,
          clazzName: '成果产出数',
          yearGrowth: 12,
          dayGrowth: 11,
        },
        {
          title: '社会服务',
          time: '2025.03.01-2025.07.05',
          projectName: '合作项目数',
          projectCount: 345,
          clazzCount: 345,
          clazzName: '成果转化数',
          yearGrowth: 12,
          dayGrowth: 11,
        },
      ]
    };
  },
  created() {
    this.getData()
    this.ScientificGetData()
    this.querySocialGetData()
  },
  methods: {
    async getData() {
      const Teaching = await queryTeachingResearchApi();
      const jgYear = this.calculateYearOnYear(
        Teaching.data.courseReformTotal, 
        Teaching.data.courseReformLastYearTotal
      );
      const jgDay = this.calculateDayOnDay(
        Teaching.data.courseReformTodayTotal, 
        Teaching.data.courseReformYesterdayTotal
      );
      const kcYear = this.calculateYearOnYear(
        Teaching.data.teachingResearchTotal, 
        Teaching.data.teachingResearchLastYearTotal
      );
      const kcDay = this.calculateDayOnDay(
        Teaching.data.teachingResearchTodayTotal, 
        Teaching.data.teachingResearchYesterdayTotal
      );
      
      this.$set(this.dataList, 0, {
        ...this.dataList[0],
        jgxms: Teaching.data.courseReformTotal,
        kccxs: Teaching.data.teachingResearchTotal,
        jgYearStatus:jgYear.status,
        jgYearMessage:jgYear.message,
        jgDayStatus:jgDay.status,
        jgDayMessage:jgDay.message,
        kcYearStatus:kcYear.status,
        kcYearMessage:kcYear.message,
        kcDayStatus:kcDay.status,
        kcDayMessage:kcDay.message
      })
    },

    async ScientificGetData() {
      const Teaching = await queryScientificResearchApi();
      const jgYear = this.calculateYearOnYear(
        Teaching.data.budgetTotal, 
        Teaching.data.lastYearBudgetTotal
      );
      const jgDay = this.calculateDayOnDay(
        Teaching.data.todayBudgetTotal, 
        Teaching.data.yesterdayBudgetTotal
      );
      const kcYear = this.calculateYearOnYear(
        Teaching.data.scientificResearchTotal, 
        Teaching.data.scientificResearchLastYearTotal
      );
      const kcDay = this.calculateDayOnDay(
        Teaching.data.scientificResearchTodayTotal, 
        Teaching.data.scientificResearchYesterdayTotal
      );
      
      this.$set(this.dataList, 1, {
        ...this.dataList[1],
        jgxms: Teaching.data.budgetTotal,
        kccxs: Teaching.data.scientificResearchTotal,
        jgYearStatus:jgYear.status,
        jgYearMessage:jgYear.message,
        jgDayStatus:jgDay.status,
        jgDayMessage:jgDay.message,
        kcYearStatus:kcYear.status,
        kcYearMessage:kcYear.message,
        kcDayStatus:kcDay.status,
        kcDayMessage:kcDay.message
      })
    },

    async querySocialGetData(){
      const Teaching = await querySocialServiceApi();
      const jgYear = this.calculateYearOnYear(
        Teaching.data.socialServiceTotal, 
        Teaching.data.socialServiceLastYearTotal
      );
      const jgDay = this.calculateDayOnDay(
        Teaching.data.socialServiceTodayTotal, 
        Teaching.data.socialServiceYesterdayTotal
      );
      const kcYear = this.calculateYearOnYear(
        Teaching.data.conversionTotal, 
        Teaching.data.conversionLastYearTotal
      );
      const kcDay = this.calculateDayOnDay(
        Teaching.data.conversionTodayTotal, 
        Teaching.data.conversionYesterdayTotal
      );
      
      this.$set(this.dataList, 2, {
        ...this.dataList[2],
        jgxms: Teaching.data.socialServiceTotal,
        kccxs: Teaching.data.conversionTotal,
        jgYearStatus:jgYear.status,
        jgYearMessage:jgYear.message,
        jgDayStatus:jgDay.status,
        jgDayMessage:jgDay.message,
        kcYearStatus:kcYear.status,
        kcYearMessage:kcYear.message,
        kcDayStatus:kcDay.status,
        kcDayMessage:kcDay.message
      })
    },


    calculateYearOnYear(currentYear, lastYear, decimalPlaces = 2) {
      // 验证数据类型
      if (typeof currentYear !== 'number' || typeof lastYear !== 'number') {
          throw new Error('今年和去年的数据必须是数字类型');
      }
      
      // 处理去年数据为0的情况
      if (lastYear === 0) {
          if (currentYear === 0) {
              return {
                  status: 'decrease', // 特殊情况：均为0视为持平，归为decrease类别
                  message: '0%'
              };
          }
          return {
              status: 'increase', // 从0到有，视为增长
              message: `${currentYear}%`
          };
      }
      
      // 计算增长率（未乘以100的原始值）
      const growthRate = (currentYear - lastYear) / lastYear;
      // 格式化后的百分比值
      const formattedRate = Number(growthRate.toFixed(decimalPlaces + 2)) * 100;
      
      // 确定增长状态（仅分为增长和下降两类）
      const status = growthRate >= 0 ? 'increase' : 'decrease';
      
      // 生成说明信息
      let message;
      if (growthRate > 0) {
          message = `${formattedRate.toFixed(decimalPlaces)}%`;
      } else if (growthRate < 0) {
          message = `${Math.abs(formattedRate).toFixed(decimalPlaces)}%`;
      } else {
          message = '0%'; // 增长率为0时的特殊说明
      }
      return {
          status: status,
          message: message
      };
    },
    calculateDayOnDay(currentDay, previousDay, decimalPlaces = 2) {
      
      // 验证数据类型
      if (typeof currentDay !== 'number' || typeof previousDay !== 'number') {
        throw new Error('当日和前一日的数据必须是数字类型');
      }
      
      // 处理前一日数据为0的情况
      if (previousDay == 0) {
        if (currentDay == 0) {
          return {
            status: 'decrease',
            message: '0%'
          };
        }
        return {
          status: 'increase',
          message: `${currentDay}%`
        };
      }
      
      // 计算环比增长率（未乘以100的原始值）
      const growthRate = (currentDay - previousDay) / previousDay;
      // 格式化后的百分比值
      const formattedRate = Number(growthRate.toFixed(decimalPlaces + 2)) * 100;
      
      // 确定增长状态（仅分为增长和下降两类）
      const status = growthRate >= 0 ? 'increase' : 'decrease';
      
      // 生成说明信息
      let message;
      if (growthRate > 0) {
          message = `${formattedRate.toFixed(decimalPlaces)}%`;
      } else if (growthRate < 0) {
          message = `${Math.abs(formattedRate).toFixed(decimalPlaces)}%`;
      } else {
          message = '0%';
      }
      return {
          status: status,
          message: message
      };
    }
  },
}
</script>

<style scoped>
.dashboard-container {
  padding: 12px;
  box-sizing: border-box;
}

/* 强制一行显示三个面板 */
.card-row {
  display: flex;
  width: 100%;
  gap: 12px; /* 面板之间的间距 */
}

.stat-card {
  flex: 0 0 calc(33.333% - 14px); /* 计算三个面板的宽度，减去间距 */
  background-color: #FFF;
  border-radius: 8px;
  padding: 20px 46px;
  box-sizing: border-box;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.header-info .card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.header-info .time-range {
  font-size: 12px;
  color: #999;
}

.header-img img {
  width: 200px;
  height: 40px;
}

/* 卡片内容样式 */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-info{
  display: flex;
  align-items: center;
  color: #999;
  font-size: 13px;
  margin-bottom: 3px;
}
.stat-info .stat-label {
  margin-right: 16px;
}

/* 增长指标样式 */
.growth-indicators {
  display: flex;
  gap: 15px;
}

.growth-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.growth-type {
  color: #999;
}

.growth-icon img {
  width: 14px;
  height: 14px;
}

.growth-value {
  font-weight: 500;
  color: #333;
}
</style>